<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-05-30 11:23:19
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-05-30 11:25:26
 * @FilePath: \SUSU_CSS\web\CSS\3D环形进度.htm
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  body,
  html {
    width: 100%;
    height: 100%;
  }

  @property --per {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }

  div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: perspective(350px);
  }

  div::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 50px;
    border-radius: 50%;
    transform: rotateX(-125deg);
    background: conic-gradient(#03b6fd, #3F51B5, #03b6fd);
    -webkit-mask: radial-gradient(transparent, transparent 129px, #000 130px), repeating-conic-gradient(#000, #000 13deg, transparent 13deg, transparent 15deg), conic-gradient(transparent, transparent var(--per), #000 var(--per), #000);
    mask: radial-gradient(transparent, transparent 129px, #000 130px), repeating-conic-gradient(#000, #000 13deg, transparent 13deg, transparent 15deg), conic-gradient(transparent, transparent var(--per), #000 var(--per), #000);
    -webkit-mask-composite: source-in;
    mask-composite: source-in;
    -webkit-animation: move 5s infinite ease-in-out;
    animation: move 5s infinite ease-in-out;
  }

  div::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(https://s1.ax1x.com/2023/05/29/p9X3QOI.png);
    background-size: 300px 300px;
    background-repeat: no-repeat;
  }

  @-webkit-keyframes move {
    100% {
      --per: 100%;
    }
  }

  @keyframes move {
    100% {
      --per: 100%;
    }
  }
</style>

<body>
  <div></div>
</body>

</html>